<template>
  <div class="heard">
    <div class="heardImg">
      <img :src="company.coverPhoto" alt="image" style="width: 120px;height: 120px;margin-top: 6%;margin-left: 40%">
    </div>
    <div style="float: left;width: 55%;height: 100%;">
      <div style="margin-left: 5px;margin-top: 30px;">
        <!--          公司名称,超或超过长度显示省略号-->
        <h1 class="Title" style="color: white">{{company.corporateName}}</h1>
        <h4 style="margin-top: 20px"><el-icon><LocationFilled /></el-icon> {{company.companyAddress}}</h4>
      </div>
    </div>
    <!--    数据统计-->
    <div style="float: right;margin-right: 40px;margin-top: -80px;width: 340px;color: white">
      <n-row>
        <n-col :span="12" >
          <h3 style="color: white">在招职数</h3>
          <h2 style="margin-top: 10px;color: whitesmoke">{{companyJob.length}}</h2>
        </n-col>
        <n-col :span="12" style="float: right;color: white" >
          <h3 style="color: white">HR数量</h3>
          <h2 style="margin-top: 10px;color: whitesmoke">{{hr.length}}</h2>
        </n-col>
      </n-row>
    </div>
  </div>
  <!--主要内容开始-->
  <div style="padding-bottom:80px;min-width: 1300px;margin-top: -1px;background: linear-gradient(-56deg, rgba(102,81,238,0.65), rgb(255,255,255));width: 100%;">
<!--  标签页-->
      <div style="width: 85%;margin-left: 6%;" >
    <a-tabs default-active-key="1" size="100px">
      <a-tab-pane key="1" title="公司简介">
        <div style="height: 1100px;width: 70%;background-color: white;border-radius: 20px;float: left;font-size: 16px">
          <h2>公司简介</h2>
          <!--     公司简介内容 控制长度11行后显示省略号-->
          <div style="width: 89%;margin-top: 10px;margin-left: 34px;margin-bottom:10px;color: #5d4785;overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp:11;display: -webkit-box;-webkit-box-orient: vertical;">
            {{company.companyProfile}}
          </div>
          <a-divider dashed />
          <h2>公司规模</h2>
          <!--     公司简介内容 控制长度11行后显示省略号-->
          <div style="width: 89%;margin-top: 10px;margin-left: 34px;margin-bottom:10px;color: #5d4785;height: 50px; overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp:11;display: -webkit-box;-webkit-box-orient: vertical;">
            {{company.companySize}}
          </div>
          <a-divider dashed />
<!--          公司图片-->
          <h2>公司相册</h2>
          <a-image-preview-group infinite v-for="j in 2" :key="j" >
            <a-space v-for="i in 3" :key="i" style="margin-left: 20px;margin-top: 20px">
              <a-image :src="company.photoShow" width="240" height="170" style="border-radius: 10px"/>
            </a-space>
          </a-image-preview-group>
          <a-divider dashed style="margin-top: 25px" />
<!--          公司地址-->
          <h2>公司地址</h2>
          <h4 style="margin-top: 10px;margin-left: 60px"><el-icon><MapLocation /></el-icon> {{company.companyAddress}}</h4>
        </div>
          <!--    在招职位-->
        <div style="overflow: auto;height: 800px;width: 70%;background: linear-gradient(-56deg, rgba(255,255,255,0.68), rgba(231,228,253,0.95));border-radius: 20px;margin-top: 10px;float: left;font-size: 16px">
          <h2 style="margin-bottom: 5px">在招职位</h2>
          <a-row class="grid-demo" :key="i" style="width: 90%;height: 22%">
            <a-col :span="24" style="width: 70%;height: 100%" v-for="j in companyJob"
                   @click="goToJobDetail(j.id)">
              <div>
                <div class="cardZW"><h2><el-icon><Link /></el-icon></h2>
                  <!--              职位名-->
                  <h3>{{j.titleName}}</h3>
                  <div style="margin-bottom: 10px">
                    <!--                工资-->
                    <h4 style="margin-top: 20px;margin-left: 30px">{{j.salary}}</h4>
                    <h4 style="float: right;margin-top: -20px;margin-right: 30px"><el-icon><LocationInformation /></el-icon>{{j.recruitmentCity}}</h4>
                  </div>

                </div>
              </div>
            </a-col>
          </a-row>
        </div>
        <!--  右边内容-->
        <!--    公司基本信息-->
        <div style="width: 29%;height: 210px;background: linear-gradient(-56deg, rgba(149,165,241,0.68), rgba(110,48,204,0.95));float: right;margin-top: -78%;border-radius: 20px">
          <h2 style="color: white">工作时间及福利</h2>
          <div style="width: 100%;height: 170px;">
            <!--        左边信息-->
            <div style="width: 45%;height: 170px;margin-top: 25px;margin-left: 30px">
              <!--          工作时间-->
              <h4 style="color: white"><el-icon><Bell /></el-icon> 8：00-18：00</h4>
              <!--          公司类别-->
              <h4 style="margin-top: 10px;color: white"><el-icon><TrendCharts /></el-icon> 双休、不加班</h4>
              <!--          福利-->
              <h5 style="margin-top: 10px;width: 80%"><el-icon><Grid /></el-icon> 福利：弹性工作</h5>
            </div>

          </div>
        </div>
        <!--以下是广告-->
        <img src="../../assets/img/job/1.png" style="width: 29%;height: 240px;background-color:white;float: right;margin-top: -60%;border-radius: 20px">
        <img src="../../assets/img/job/2.png" style="width: 29%;height: 240px;background-color:white;float: right;margin-top: -41%;border-radius: 20px">
        <img src="../../assets/img/job/3.png" style="width: 29%;height: 240px;background-color:white;float: right;margin-top: -20.1%;border-radius: 20px">
        <img src="../../assets/img/job/4.png" style="width: 29%;height: 240px;background-color:white;float: right;margin-top: 0.5%;border-radius: 20px">
        <img src="../../assets/img/job/5.png" style="width: 29%;height: 240px;background-color:white;float: right;margin-top: 0.6%;border-radius: 20px">

      </a-tab-pane>
    </a-tabs>
      </div>

    </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const router = useRouter();
const id = ref();
const company = ref([]);
const companyJob = ref([]);
const hr = ref([]);

// 页面加载时加在数据
onMounted(() => {

  const query = router.currentRoute.value.query;
  id.value = query.id || ''; // 如果没有q参数，则默认为空字符串
  loadData(id.value);
  window.scrollTo(0, 0);
})

const loadData = (id)=>{
  axios.get(BASE_URL+'/v1/detail/CompanyDetail/'+id)
      .then((response)=>{
        if (response.data.code == 2000) {
          company.value=response.data.data;
          console.log(company.value);
          console.log("id::::"+company.value.id);
          loadJob(company.value.id);
          NumOfHr(company.value.id);
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}

const loadJob = (id)=>{
  axios.get(BASE_URL+'/v1/Ssearch/selectByCompanyId?id='+id)
      .then((response)=>{
        if (response.data.code == 2000) {
          companyJob.value=response.data.data;
          console.log('数据数据！！'+response.data.data);
          if(companyJob.value!=null){
            for (let i = 0; i < companyJob.value.length;i++){
              if(companyJob.value[i].educationalRequirements=='10'){
                companyJob.value[i].educationalRequirements='大专';
              }
              else if(companyJob.value[i].educationalRequirements=='20'){
                companyJob.value[i].educationalRequirements='本科';
              }else if(companyJob.value[i].educationalRequirements=='30'){
                companyJob.value[i].educationalRequirements='研究生';
              }
            }
          }
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}

const goToJobDetail = (id)=>{
  window.open('http://localhost:9090/JobDetail?id='+id, '_blank');

}

const NumOfHr = (id)=>{
  axios.get(BASE_URL+'/v1/Ssearch/selectHrByCompanyId?id='+id)
      .then((response)=>{
        if (response.data.code == 2000) {
          hr.value=response.data.data;
          console.log('数据数据！！'+response.data.data);
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}

</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
  text-decoration:none;
  font-family: Inter,'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
.heard{

  height: 150px;
  background: linear-gradient(45deg, rgb(49, 79, 143), rgb(132, 55, 210));/*渐变颜色*/
  width: 100%;
  margin-top:0;
  top:0;
  position: sticky;
  z-index:90;
  color: whitesmoke;
}
.heardImg{
  width: 20%;
  float: left;
  height: 100%;
}
.baa1{
  background: linear-gradient(90deg, rgb(132, 55, 210), rgb(54, 92, 243));/*渐变颜色*/
  margin-left: 3px;
  transition: transform .2s; /* 动画 */
  :deep(.el-button__wrapper) {
    box-shadow: 0 0 5px rgb(108, 66, 149); /* 霓虹边框效果，可以根据需求调整颜色和模糊度 */
    border-radius: 20px; /* 设置圆角半径 */
    cursor: default;
    .el-button__inner {
      cursor: default !important;
    }
  }
}
.baa1:hover{
  background: linear-gradient(45deg, #502a8a, #ba7ef6);
  transform: scale(1.1); /* （120% 缩放按钮动态*/
}
.Title{
  width: 550px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
h2{
  color: #481879;
  margin-left: 30px;
  margin-top: 30px;
}
.grid-demo{
  width: 90%;
  height: 30%;
  margin-left: 20px;
}
.cardZW{
  width: 97%;
  height: 19vh;
  margin-left: 25px;
  background-color: white;
  border-radius: 20px;
  color: #612e94;
}
.cardZW:hover{
  background-color: rgba(191, 187, 211, 0.65);
  color: rgba(33, 31, 33, 0.74);
  h3{
    color: #612e94;
  }
}
h3{
  color: #6c6c6c;
  margin-left: 30px;
  width: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
h5{
  color: white;
}
</style>
